<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<HTML xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>FLASH 上传控件演示DEMO</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
         <jsp:include page="${path }/js/common/include.jsp"></jsp:include> 
        <script type="text/javascript">
        
        //删除文件
   	  	function deleteFile(file){   	 
   	  		//在界面删除文件
   	  		document.getElementById("uploaded").removeChild(document.getElementById("preview-item-"+file));
   	  		//AJAX传递到服务器删除文件
   	  		//略
   	  		
        }
        	
        function addImages(files){
        	var imgs="";
   			for(var i=0;i<files.length;i++)
   			{
   				imgs+="<li id='preview-item-"+files[i].name+"'><table>";
   				imgs+="<tr><td style='width:180px;height:160px;'><img src='${path }/"+files[i].remoteUrl+"' class='' width='110'  height='120' /></td></tr>";
   				imgs+="<tr><td><div style='width:150px;height:20px;overflow:hidden;float:left;'>"+files[i].label+"</div><a href='javascript:deleteFile(\""+files[i].name+"\")'>删除</a></td></tr>";
   				imgs+="</table></li>";
   			}
   			
   			document.getElementById("uploaded").innerHTML=imgs;
        } 
        
           function cbfunction(rs){
        	   
           		if(rs.success)
           		{
           			addImages(rs.files);
           		}
           }
           
        	new JFileUploader({
        		width:600,
        		height:400,
        		el:"flashContainer",        		
        		multiple:true,          		
				previewWidth:150,
				previewHeight:180,
				isCompression:true,				
				compressionLimit:(1024*((1024/10)*2)),
				uploadRequestURL:"${path }/uploadFile",  
				savePath:"dress/uploaded/images/product/",
				swfUrl:"${path }/js/plugins/JFileUploader/",
				queueSize:5,
				callbackName:cbfunction
        	});
            
            
        	$(function () {
        		$("button").button().click(function(){
        			$("#dialog").dialog("open");
        		});;
        		$("#dialog").dialog({
        			//是否自动打开对话框
        	        autoOpen: false,
        	        //宽度
        	        width: 630,	
        	        height:550,
        	        //是否模态化     
        	        modal:true,
        	        //是否可以移动
        	        draggable:true,
        	        //是否可以改变大小
        			resizable:true,
        			//给对话框下方添加按钮,如果buttons不配置则没有任何按钮
        	        buttons: {
        	        	//添加确定按钮，并添加响应事件
        	            "确定": function () {
        	                $(this).dialog("close");
        	            } 
        	        }

        		});
        		
        		$( "#uploaded" ).sortable({
        			placeholder: "ui-state-highlight"
        		});
        		
        	    $( "#uploaded" ).disableSelection();
        		
    			
        	});
        </script>
        <style type="text/css">
           #uploaded 
           { 
           		list-style-type: none; 
           		margin: 0; 
           		padding: 0; 
           		width: 450px; 
           	}
  		  #uploaded li 
  		  { 
  		  	margin: 8px; 
  		  	padding: 1px;
  		  	 float: left; 
  		  	 width: 180px; 
  		  	 height: 180px; 
  		  	 font-size: 12px;
			text-align: center;
			cursor:move;
			border:1px #ccc dashed;
		}
		
        </style>
    </head>
    <body>
    	<table style="width:1000px;height:240px;margin:0 auto;text-align:left;">
    		<tr><td style="height:20px;">苗木产品图片上传示例（多图）：</td></tr>
    		<tr><td style="height:20px; "><button class="ui-button-success">上传图片</button></td></tr>
    		<tr>
    			<td>
    				 
    					<ul id="uploaded" style="width:1000px;height:200px; border:1px solid #999;text-align:left">
						 
<!-- 						  <li class="ui-state-default">5</li> -->
						  
						</ul>
    				 
    			</td>
    		</tr>
    	</table> 
    	<!-- 外围容器，控制位置等其他要素 -->
        <div id="dialog" style="width:600px;height:400px;border:0px solid #ccc;" title="图片上传">
        	<!-- FLASH 容器，初始化完毕后被替换掉 --> 
        	<div id="flashContainer">上传控件加载中！！请稍候。。。</div>
        </div> 
   </body>
</html>

